<template>
  <div id="forumpage"
       :style="{background: 'url('+bgimgBtn+')',backgroundRepeat: 'no-repeat',backgroundSize: '100% 100%'}">
    <div class="forum">
      <div class="header-out">
        <div class="header">
          <div class="headerleft">
            <img src="@/assets/imageAdmin/logo.jpg" alt="">
            小森林圈
          </div>
        </div>
      </div>
      <div class="rourmCenter">
        <div class="rourmCenter-centent">
          <div class="nexttitle">
            <el-page-header @back="goBack" content="文章编辑"></el-page-header>
          </div>
          <div class="centent-two linebox">
            <el-row>
              <el-col :span="24" class="warp-main">
                <el-form ref="infoForm" :model="infoForm" :rules="rules" label-width="110px">
                  <el-row>
                    <el-col :span="20">
                      <el-form-item label="文章标题:" prop="title">
                        <el-input v-model="infoForm.title" placeholder="填写文章标题"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4"></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="20">
                      <el-form-item label="文章版块:" prop="plate_id">
                        <el-select v-model="infoForm.plate_id" placeholder="文章版块" class="w-140 mr-10">
                          <el-option :label="item.name" :value="item.id" v-for="(item, index) in typeList"
                                     :key="index"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4"></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="通知范围:">
                        <el-radio-group v-model="infoForm.type" @change="radiochangeTab">
                          <el-radio :label="0">全校职工</el-radio>
                          <el-radio :label="1">特定职工</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item label="选择特定职工:" v-if="infoForm.type==1">
                    <el-button type="primary" @click="chooseStudent" class="mb-10" size="small">选择通知的职工</el-button>
                    <div>
                      <el-tag
                              :key="tag"
                              v-for="(tag,index) in dynamicTags"
                              closable
                              :disable-transitions="false"
                              @close="handleClose(index)"
                              class="mr-10"
                      >{{tag}}
                      </el-tag>
                    </div>
                  </el-form-item>
                  <el-row>
                    <el-col :span="20">
                      <el-form-item label="生成二维码:" @click.native="userInfoFn">
                        <el-radio-group v-model="infoForm.is_parents" @change="radiochangeTab">
                          <el-radio :label="1">是</el-radio>
                          <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4"></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="20">
                      <el-form-item label="文章内容:" prop="body">
                        <div class="edit_container">
                          <quill-editor v-model="infoForm.body"
                                        ref="myQuillEditor"
                                        class="editer"
                                        :options="editorOption"
                                        placeholder="通知内容">
                          </quill-editor>
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4"></el-col>
                  </el-row>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">确认提交</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <MultipleTeacherModle :visible.sync="studentVisible" @studentFn="studentFn" :userclassId="infoForm.class_id"
                          :usersectionId="infoForm.section_id" :dynamicTagsArray="dynamicTagsArray"></MultipleTeacherModle>
  </div>
</template>

<script>
  import bgimgBtn from '@/assets/imageAdmin/bgforue.png'
  import api from '@/utils/api.js'
  import '@/assets/scss/forum.scss'
  import {quillEditor} from 'vue-quill-editor' // 调用编辑器
  import quillConfig from '@/assets/js/quill-config.js'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  export default {
    computed: {
      editor () {
        return this.$refs.myQuillEditor.quill
      }
    },
    components: {
      // 使用编辑器
      quillEditor,
      // teacherMultiple
    },
    data () {
      return {
        studentVisible: false,
        dynamicTags: [],
        dynamicTagsId: [],
        dynamicTagsArray: {},
        bgimgBtn: bgimgBtn,
        editId: this.$route.query.editId,
        infoForm: {
          title: '', // 	字符串 	必填 	1 	- 	标题
          user_ids: 0,
          plate_id: '', //
          type: 0,
          body: '', // 	字符串 	必填 	1 	- 	内容
          is_parents: 1 // 	字符串 	必填 	0否 1是 	- 	是否生成二维码
        },
        editorOption: quillConfig,
        // 表单验证
        rules: {
          title: [
            {required: true, message: '填写文章标题', trigger: 'blur'}
          ],
          body: [
            {required: true, message: '填写文章内容', trigger: 'blur'}
          ],
          plate_id: [
            {required: true, message: '请选择文章板块', trigger: 'change'}
          ]
        },
        oneState: false,
        userInfo: null,
        cateList: [],
        typeList: [], //  	1未报警2已报警
        classesListNew: [],
        sectionList: [],
        classesList: [],
        value1: []
      }
    },
    created () {
      this.InitFn()
      this.admin_section_index()
    },
    methods: {
      goBack () {
        this.$router.go(-1)
      },
      cateFn () {
        this.$fetch(api.forum_plate_index, {p: 1, user_id: this.userInfo.id}).then((response) => {
          if (response.code === 0) {
            this.typeList = response.list.data
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      InitFn () {
        this.$fetch(api.admin_user_detail, {}).then((response) => {
          if (response.code === 0) {
            if (response.detail.id === 1) {
              if (response.examine.length && response.plate.length) {
                this.oneState = true
              }
            } else {
              this.oneState = true
            }
            this.userInfo = response.detail
            this.articleFn()
            this.cateFn()
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      articleDetail () {
        this.$fetch(api.forum_postings_edit, {id: this.editId, p: 1}).then((response) => {
          if (response.code === 0) {
            this.infoForm.title = response.vo.title
            this.infoForm.type = response.vo.type
            this.infoForm.is_parents = response.vo.is_parents
            this.infoForm.plate_id = response.vo.plate.id
            this.infoForm.body = response.vo.body
            if (response.vo.type === 1) {
              let array_ = []
              for (let i in response.vo.section_ids) {
                array_.push(response.vo.section_ids[i].id)
              }
              this.infoForm.section_ids = array_.join(',')
              this.value1 = array_
              console.log('value1:', this.value1)
            }
            if (response.vo.type === 2) {
              this.infoForm.section_ids = response.vo.section_ids[0].id
              this.infoForm.class_ids = response.vo.class_ids[0].id
              this.sectionChange(response.vo.section_ids[0].id)
            }
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      articleFn () {
        this.$fetch(api.forum_postings_show_index, {}).then((response) => {
          if (response.code === 0) {
            // this.articleFn()
            this.cateList = response.path
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      handleClose (index) {
        this.dynamicTags.splice(index, 1)
        delete this.dynamicTagsArray[this.dynamicTagsId[index]] // 去除选中的人
        this.dynamicTagsId.splice(index, 1)
        this.infoForm.users = this.dynamicTagsId.join(',')
      },
      admin_section_index () {
        this.$post(api.admin_section_index, {
          p: 1
        }).then((response) => {
          if (response.code === 0) {
            this.sectionList = response.list.data
            this.admin_class_index()
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      admin_class_index () {
        this.$fetch(api.user_classesindex, {p: 1}).then((response) => {
          if (response.code === 0) {
            let array_ = {}
            for (let i in response.list.data) {
              let new_array = array_[response.list.data[i].section_id] || []
              new_array.push(response.list.data[i])
              array_[response.list.data[i].section_id] = new_array
            }
            this.classesListNew = array_
            if (this.editId) {
              this.articleDetail()
            }
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 获取年段班级信息
      sectionChange (val) {
        console.log('获取相应的', val, this.sectionList, this.classesListNew)
        for (let i in this.sectionList) {
          if (this.sectionList[i].id === val) {
            console.log('获取相应的', this.classesListNew[this.sectionList[i].section_name])
            this.classesList = this.classesListNew[this.sectionList[i].section_name]
            // this.classesvalue = ''
            return
          }
        }
      },
      chooseStudent () {
        console.log('idname:', this.infoForm.section_id, this.infoForm.class_id)
        this.studentVisible = true
      },
      radiochangeTab () {
        this.infoForm.user_ids = 0
      },
      onSubmit () {
        // 提交 this.$refs.infoForm.validate，这是表单验证
        this.$refs['infoForm'].validate((valid) => {
          console.log('this.infoForm:', this.infoForm)
          if (valid) {
            if (this.infoForm.type === 1 && this.infoForm.user_ids === 0) {
              this.$message({
                message: '请选择通知的职工',
                type: 'error'
              })
              return
            }
            let url_ = api.forum_postings_add
            if (this.editId) {
              url_ = api.forum_postings_edit
              this.infoForm.id = this.editId
            }
            this.$post(url_, this.infoForm).then(res => {
              if (res.code === 0) {
                if (!this.editId) {
                  this.infoForm.plate_id = 0
                  this.infoForm.title = ''
                  this.infoForm.type = 0
                  this.infoForm.section_ids = ''
                  this.infoForm.class_ids = ''
                  this.infoForm.body = ''
                  this.infoForm.is_parents = 1
                }
                this.$message({
                  message: '编辑成功',
                  type: 'success'
                })
                if (this.editId) {
                  this.$router.go(-1)
                }
              } else {
                this.$message({
                  message: res.msg,
                  type: 'error'
                })
              }
            })
          }
        })
      },
      showlist () {
        this.$router.push('/forumlist')
      },
      studentFn (option) {
        this.dynamicTags = []
        for (let i in option) {
          this.dynamicTags.push(option[i].realname)
          this.dynamicTagsId.push(option[i].id)
          this.dynamicTagsArray = option
        }
        this.infoForm.user_ids = this.dynamicTagsId.join(',')
      }
    },
    mounted () {
    }
  }
</script>


